<template>
  <div class="co-body">
    <div class="co-body-sup">
      <div class="co-bp-left">
        <ul>
          <li class="co-bpl-item1 el-mb-3">
            <Item1 ref="Item1Ref"></Item1>
          </li>
          <li class="co-bpl-item2 el-mb-3">
            <Item2 ref="Item1Ref"></Item2>
          </li>
          <li class="co-bpl-item3">
            <Item3 ref="Item1Ref"></Item3>
          </li>
        </ul>
      </div>
      <div class="co-bp-mid">
        <ul class="mid-item">
          <li class="co-mid-item1">
            <Item4 ref="Item2Ref"></Item4>
          </li>
          <li class="co-mid-item2">
            <Item5 ref="Item3Ref"></Item5>
          </li>
        </ul>
      </div>
      <div class="co-bp-right">
        <ul>
          <li class="co-right-item1">
            <Item6 ref="Item4Ref"></Item6>
          </li>
          <li class="co-right-item2">
            <Item7 ref="Item5Ref"></Item7>
          </li>
          <li class="co-right-item3">
            <Item8 ref="Item6Ref"></Item8>
          </li>
          <li class="co-right-item4">
            <Item9 ref="Item6Ref"></Item9>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import Head from './head.vue'
import Item1 from './item1.vue'
import Item2 from './item2.vue'
import Item3 from './item3.vue'
import Item4 from './item4.vue'
import Item5 from './item5.vue'
import Item6 from './item6.vue'
import Item7 from './item7.vue'
import Item8 from './item8.vue'
import Item9 from './item9.vue'

@Component({
  name: 'Index',
  components: {
    Head,
    Item1,
    Item2,
    Item3,
    Item4,
    Item5,
    Item6,
    Item7,
    Item8,
    Item9
  }
})
export default class Index extends Vue {}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.page-index {
  width: 100%;
  height: 100%;
  background: #002160;
  // overflow: auto;
  overflow: overlay !important;
}
.cockpit-bg {
  width: 1920px;
  height: 1080px;
  background: #002160;
  overflow: hidden;
  margin: hidden;
}
.co-head {
  width: 100%;
  height: 82px;
  position: relative;
  z-index: 100;
}
.co-body {
  max-width: 1920px;
  position: relative;
  overflow: hidden;
  z-index: 80;
  .co-body-bg {
    width: 100%;
    height: 40%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    > img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .co-body-sup {
    width: 100%;
    padding: 8px 12px 12px 12px;
    position: relative;
    display: flex;
    ul {
      // border: solid 1px green;
      height: 100%;
    }
    .mid-item {
      .co-mid-item2 {
        height: 251px;
      }
      .co-mid-item1 {
        margin-bottom: 10px;
        margin-top: -8px;
        height: 686px;
      }
    }

    &:after {
      content: '';
      display: table;
      clear: both;
    }
    .co-bp-center {
      width: 55%;
      height: 100%;
      padding: 0 0 12px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 90;
    }
    .co-bp-left {
      width: 464px;
      flex-shrink: 0;

      .co-bpl-item1 {
        height: 423px;
      }
      .co-bpl-item2 {
        height: 242px;
      }
      .co-bpl-item3 {
        height: 250px;
      }
    }
    .co-bp-mid {
      flex: 1;
      padding: 0 12px;
    }
    .co-bp-right {
      width: 460px;
      flex-shrink: 0;
      .co-right-item1 {
        height: 287px;
      }
      .co-right-item2 {
        height: 261px;
      }
      .co-right-item3 {
        height: 227px;
        // border: solid 1px yellow;
      }
      .co-right-item4 {
        height: 144px;
        // border: solid 1px yellow;
      }
      .co-right-item2,
      .co-right-item3 {
        margin: 8px 0;
      }
      .co-right-item1 {
        margin-top: -3px;
      }
    }
  }
  .co-body-sub {
    width: 100%;
    padding: 0 16px 16px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    .co-bb-item {
      flex: none;
      width: 24.4%;
      height: 240px;
    }
  }
}
.co-body-content {
  .co-mt {
    margin-top: 12px;
  }
  display: flex;
  color: white;
  .co-left {
    width: 476px;
    .co-lf-content {
      margin: 12px;
      // .co-lf-back {
      //   // height: 20px;
      // }
      .co-lf-zt {
        height: 723px;
        margin-top: 10px;
      }
      .co-lf-zx {
        height: 233px;
      }
    }
  }
  .co-right {
    width: 1428px;
  }
}
::v-deep .com-name-style {
  font-size: 18px !important;
  color: #fff;
  text-shadow: 0 0 14px #006aff !important;
}
::v-deep .co-title-name {
  height: 42px !important;
  margin-top: -9px !important;
  img {
    height: 70% !important;
    margin-top: 6px;
  }
}
</style>
